<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.7.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//#id 选择器
				$("#p1").css("color","red");
				
				//类型选择器
				$("u").css("color","blue");
				
				//class选择器
				$('.p2').css("color","gold");
				
				//群组选择器
				$("b,i").css("color","red");
				
				//后代选择器
				$(".box em").css("color","red");
				
				//子选择器
				$(".box>em").css("font-size","30px");
				
				//:not选择器
				$(".box em:not(.em2)").css("background","pink");
				
				//:nth-child选择器
				$(".box2 p:nth-child(-n+3)").css("color","blue")
				$(".box2 p:last-child").css("background","gold")
			})
		</script>
	</head>
	<body>
		<p id="p1">考多少分就打开拉萨附近</p>
		<u>123</u>
		<u>456</u>
		<p class="p2">dkljfhsdjkfh</p>
		<b>决定返回东京</b>
		<i>sdfsf</i>
		<div class="box">
			<em>法大师傅士大夫</em>
			<h3>
				<em class="em2">恶打撒打撒</em>
			</h3>
		</div>
		<div class="box2">
			<p>1dsdsdsdsdsds</p>
			<p>2dsdsdsdsdsds</p>
			<p>3dsdsdsdsdsds</p>
			<p>4dsdsdsdsdsds</p>
			<p>5dsdsdsdsdsds</p>
		</div>
	</body>
</html>
